import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Layout,  Tree, Popconfirm } from 'antd';
import action from "../../store/action";
import Managenment_chil from './Managenment_chil';
import {  tree_new_fun } from '../../store/function';
import icon_img from "../../image/materials.png"
import { openNotification } from '../../component/Notification';

class index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '',
      type: '',
      examine_state: false,
      userCode:'',
      changeIcon:false
    }
  }
  componentWillMount() {
    this.handel_get();
    this.setState({
      userCode:sessionStorage.getItem('admin_key')
    })
  }
  render() {

    const { Sider, Content } = Layout;
    const onSelect = (keys, event) => {
      this.setState({
        examine_state:event.node.checked
      })
      if(event.node.children.length==0)(
        this.setState({
          changeIcon:true
        })
      )
      this.$axios.get(`/manager/api/getMaterialsJsonValue/${event.node.code}`).then((res) => {

        if (res.materialsModelJsonValue != null) {
          const { manage_select } = this.props;
          manage_select(event.node.title);
          const { manage_save } = this.props;
          tree_new_fun(res, manage_save)

        }
      }).catch((err) => {
        console.log(err);
      })
    };
    const onCheck = (e, val) => {
      this.setState({
        code: val.node.code,
        type: val.node.propertyType,
        examine_state: val.checked
      })



    }
    const tree_delete = () => {

      console.log(this.state);
      if (this.state.code != '' || this.state.state === true) {
        this.state.type === 1 ? (
          this.$axios.get(`/manager/api/deleteModel/${this.state.code}`).then((res) => {
            console.log(res);
            if (res.status == 1) {
              this.handel_get()
            }
          }).catch((err) => {
            console.log(err);

          })
        ) : (
            this.state.type === 2 ? (
              this.$axios.get(`/manager/api/deleteMaterial/${this.state.code}`).then((res) => {
                console.log(res);
                if (res.status == 1) {
                  this.handel_get()
                }
              }).catch((err) => {
                console.log(err);

              })
            ) : console.log()
          )
      } else {
        openNotification('请先选择材料或模型')
      }
    }
    const tree_examine = () => {
      if (this.state.code != '' && this.state.examine_state === true) {
        this.$axios.get(`/manager/api/throughTheReview/${this.state.code}?lUserCode=${this.state.userCode}`).then((res) => {
          if (res.status == 1) {
            this.handel_get()
          }
        }).catch((err) => {
          console.log(err);

        })
      } else {
        openNotification('请先选择材料或模型')
      }
    }
    const fall_examine = () => {
      if (this.state.code != '' && this.state.examine_state === true) {
        this.$axios.get(`/manager/api/refuseToPass/${this.state.code}?lUserCode=${this.state.userCode}`).then((res) => {
          if (res.status == 1) {
            this.handel_get()
          }
        }).catch((err) => {
          console.log(err);

        })
      } else {
        openNotification('请先选择材料或模型')
      }
    }
    const iconImg = () => {
      return <img src={icon_img}></img>
    }
    return <Layout style={{ minHeight: "100%" }}>
      <Content style={{ padding: "10px 30px" }}>
        <div className='examine_btn'>
          <Button type='primary' onClick={tree_examine}>审核</Button>
          <Button type='primary' onClick={fall_examine}>拒绝审核</Button>

          <Popconfirm
            title={this.state.state === false ? '请先选择材料或模型!' : (this.state.type === 2 ? '确定要删除该材料吗？' : (this.state.type === 1 ? '确定要删除该模型吗？' : '该节点不能被删除!'))}
            okText="确定"
            cancelText="取消"
            onConfirm={tree_delete}
          >
            <Button type='primary' danger style={{ marginRight: 10 }}>删除材料模型或者材料</Button>
          </Popconfirm>
        </div>
        <Layout
          className="site-layout-background"
          style={{ padding: "15px 0", maxHeight: 750 }}
        >

          <Sider className="site-layout-background" width={280} style={{ background: 'white' }}>

            <Tree
              checkable
              onCheck={onCheck}
              onSelect={onSelect}
              showIcon
              treeData={this.props.dataManagement}
              icon={iconImg}
            />
          </Sider>
          <Content
            style={{ padding: '15px 15px', minHeight: 280, height: "100%", background: 'white', marginLeft: 20 }}
          >
            <Managenment_chil />


          </Content>
        </Layout>
      </Content>

    </Layout>
  }
  handel_get = () => {
    this.$axios.get('/manager/api/getMaterialsCategoryTree').then((res) => {

      const { dataManage } = this.props;
      let newList = {};
      [].push.apply(newList, res.materialPropertyList)

      dataManage(newList)
    }).catch((err) => {
      console.log(err);

    })
  }
}

export default connect(state => ({ ...state.custom }), action.custom)(index);